<template>
    <div class="home-container">
        <div class="container w-50">
            <button type="button" class="btn btn-success w-50 col-12 my-3" @click="handler1">role one</button>
        </div>
        <div class="container w-50">
            <button type="button" class="btn btn-success w-50 col-12 my-3" @click="handler2">role two</button>
        </div>
        <RouterView #default="{ Component }">
            <Transition appear mode="out-in" :css="false" @enter="onEnter" @leave="onLeave">
                <component :is="Component" />
            </Transition>
        </RouterView>
    </div>
</template>

<script setup>
import { ref } from "vue";
import gsap from 'gsap';
import { useRouter } from "vue-router";

const isShow = ref(true)

const router = useRouter();

const handler1 = e => {
    // isShow.value = !isShow.value
    router.replace('/son')
}
const handler2 = e => {
    // isShow.value = !isShow.value
    router.replace('/son2')
}



const onEnter = (el, done) => {
  gsap.fromTo(el, {
    opacity: 0,
    yPercent: -100
  }, {
    opacity: 1,
    yPercent: 0,
    duration: 0.6,
    onComplete: done
  });
};
const onLeave = (el, done) => {
  gsap.to(el, {
    opacity: 0,
    yPercent: 100,
    duration: 0.6,
    onComplete: done
  });
}



</script>

<style lang="scss" scoped>
h1 {
    font-size: 50px;
    color: #fff;
}

.home-container {
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-color: rgb(151, 151, 185);
}

img {
    width: 1000px;
    height: 400px;
    border-radius: 20px;
}
</style>